Row drag settings
Description
Opens the List Row Drag Action Builder for configuring the behavior when the user drags a List row from left-to-right or right-to-left.
Discussion
The List Row Drag Action Builder allows you to define the row drag behavior when the user drags a List row left or right. Separate actions can be defined for the drag left and drag right behaviors.
The drag action can reveal multiple buttons the user can tap to perform specific tasks. Actions can also be configured to auto-execute if the user drags a row beyond a threshold.
Actions are named JavaScript code blocks, defined on the Actions tab.
Setting the Selected Row on Drag
When a row is dragged, the row does not automatically become the selected row in the List. If a previous row was selected, this row remains selected. If you want the row the user drags to automatically be selected, add this code to the Javascript for the Action:
this.setValue(index);
Row Drag Settings - Quick Access
You can get to the Row drag settings genie quickly by clicking the Quick Access... button at the bottom of the List builder and then selecting Row drag settings from the menu.
Videos
Row Drag Actions
A common user interface pattern seen in mobile apps that use a List is to allow the user to drag on a row in the List to invoke some type of action. For example in the iOS Email app a user can drag on a row to archive the row, mark is as unread/read, or move the row to another folder.
In this video we show how you can implementing row drag behavior an a List control.
Reorder List Rows by Dragging Row to a new Group when Client-side Grouping is Enabled
When client-side grouping is enabled in a List, the order of the rows in the List is determined by the sort expression that is applied to the data so that the List data can be grouped correctly. That means that if you drag a row to a new position, and then drop, the row will immediately snap back to its original position (because the client-side sort will be re-applied to the List data).
However, you might want to use drag reorder to move a row from one group to another. This is done by changing data in the row that is moved so that in the onMoveEnd event, the data in the row is updated and then, when the client-side sort is applied to the List data, the row will continue to appear in the target group.
In this video we show how a list of customers, grouped by Country, can be re-arranged by dragging a customer from one country to another.
See Also